<template>
	<div class="tf_view">
		<van-nav-bar :fiex="true" :border="false" title="划转" left-arrow @click-left="onClickLeft" />

		<div class="a_solid"></div>

		<div class="tf_itemt">
			<div class="ti_top">
				<span>您的当前等级</span>
				<div v-if="TransferData.level > 0" class="tt_right">
					<span>{{TransferData.level}}级会员</span>
					<img :src="myApp.srcPath(TransferData.level + '.png','images/vip_ico')" alt="">
				</div>
			</div>
		</div>

		<div class="a_solid"></div>

		<div class="tf_itemt">
			<div class="ti_content">
				<div>
					<p>划转金额（最多转{{TransferData.jifen_wia}}元）</p>
					<input type="number" v-model="hzMoney" :placeholder="'请输入划转金额'">
				</div>
				<div class="tc_right" @click="hzMoney = TransferData.jifen_wia">
					全部
				</div>
			</div>
		</div>

		<div class="a_solid"></div>

		<div class="tf_itemt">
			<div class="ti_bottom">
				<div>
					<span>划转方式</span>
					<p>转入积分</p>
				</div>
				<div class="tb_right">
					<!-- <div class="t_more"></div> -->
				</div>
			</div>
		</div>

		<div class="a_solid"></div>

		<div class="ti_jifeng">
			<span>
				积分
			</span>
			<div>
				{{hzMoney == '' ? '0' : Number( (TransferData.peizhi.dianwei /100 + 1) * hzMoney ).toFixed(2)}}
			</div>
		</div>

		<div class="t_qr" @click="StartTransfer">确定</div>

	</div>

</template>

<script>
	import Vue from 'vue';
	import {
		NavBar,
		Toast,
	} from 'vant';

	Vue.use(NavBar);

	import {
		Transfer,
		StartTransfer
	} from '../serve/api.js'

	export default {
		created() {

			this.Transfer()

		},
		data() {
			return {
				//划转金额
				hzMoney: '',

				//划转页面基本信息
				TransferData: ''
			}
		},

		methods: {
			//划转
			StartTransfer() {

				if (this.hzMoney == '' || this.hzMoney <= 0) {

					Toast("请输入正确的划转金额")

					return;

				}

				if (this.hzMoney.indexOf('.') > -1) {

					Toast("请输入整数金额")

					return;

				}

				if (Number(this.hzMoney) > Number(this.TransferData.jifen_wia)) {

					Toast("余额不足");

					return;

				}

				let params = {
					money: Number(this.hzMoney)
				}

				StartTransfer(params, (res) => {

					if (res.data.code == 1) {

						this.TransferData.jifen_wia = this.TransferData.jifen_wia - this.hzMoney

						this.hzMoney = ''

					}

					Toast(res.data.msg);

					// console.log(res)

				}, () => {


				})


			},

			//划转信息
			Transfer() {
				
				let params;

				Transfer(params, (res) => {
					
					// console.log(res)

					this.TransferData = res.data.data

				}, (error) => {
					

				})

			},


			onClickLeft() {
				// Toast('返回');
				this.$router.go(-1)

			},
			onClickRight() {
				Toast('按钮');
			},
		},
	};
</script>

<style scoped="">
	.t_qr {
		width: 3.8rem;
		height: .66rem;
		background: rgba(29, 88, 255, 1);
		border-radius: .33rem;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: .32rem;
		margin-top: .94rem;
	}

	.ti_bottom span,
	.ti_jifeng span {
		color: #666666;
		font-size: .26rem;
	}

	.ti_bottom p {
		color: #333333;
		font-size: .32rem;
		margin-top: .3rem;
	}

	.t_more {
		border: 5px solid rgb(102, 102, 102);
		border-color: transparent transparent transparent rgb(102, 102, 102);
	}

	.tc_right {
		padding-left: .77rem;
		padding-right: 5px;
		border-left: 1px solid #E9E9E9;
		height: .4rem;
	}

	.ti_content input::placeholder{
		color: #999;
		font-size: .32rem;
	}

	.ti_content p{
		color: #666666;
		width: 5rem;
		margin-bottom: .35rem;
		font-size: .28rem;
	}

	.tt_right {
		color: #1D58FF;
		display: flex;
		align-items: center;
	}

	.ti_top img {
		width: .4rem;
		height: .37rem;
		margin-left: .18rem;
	}

	.ti_top,
	.ti_content,
	.ti_bottom {
		width: 100%;
		font-size: .28rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ti_content {
		align-items: flex-end;
	}

	.ti_bottom {
		align-items: flex-end;
	}

	.a_solid {
		width: 100%;
		height: .17rem;
		background-color: rgb(251, 251, 251);
	}

	.tf_itemt,
	.ti_jifeng {
		padding: 0 .41rem;
		height: 1.5rem;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background-color: white;
		width: 100%;
	}

	.ti_jifeng {
		height: 1.2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: .26rem;
	}

	.tf_view {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: #FBFBFB;
	}
</style>
